<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">登录</block>
		</cu-custom>
		<view class="login-img">
			<view class="owl-login" :class="hideEyes?'password':''">
				<view class="hand"></view>
				<view class="hand hand-r"></view>
				<view class="arms">
					<view class="arm"></view>
					<view class="arm arm-r"></view>
				</view>
			</view>
		</view>
		<view class="login-form">
			<u-form :model="loginForm" ref="uLoginForm">
				<view class="title" style="text-align: center;">
					<text>登录</text>
				</view>
				<u-form-item prop="Phone" :border-bottom=false>
					<u-input v-model="loginForm.Phone" :type="userType" placeholder="手机号"
						style="background-color:white;" />
				</u-form-item>
				<u-form-item prop="userPwd" :border-bottom=false>
					<u-input v-model="loginForm.userPwd" @focus="passwordF_B" @blur="passwordF_B" :type="Pwdtype"
						placeholder="密码" style="background-color:white;" />
				</u-form-item>
				<u-form-item prop="rememberPsw">
					<u-checkbox-group>
						<u-checkbox v-model="loginForm.rememberPsw" shape="circle" @change="loginForm.rememberPsw=!loginForm.rememberPsw" label="记住账号密码"></u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<view class="login_register">
					<button type="primary" class="btn_login" shape="square" @click="loginBtn">登录</button>
					<button type="success" class="btn_register" shape="square" @click="registerBtn">注册</button>
				</view>
			</u-form>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				hideEyes: false,
				loginForm: {
					Phone: "",
					userPwd: "",
					rememberPsw: true,
				},
				userType: 'text',
				Pwdtype: 'password',
				rules: {
					Phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					userPwd: [
						// 必填规则
						{
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		mounted() {
			//页面加载完成，获取本地存储的用户名及密码
			const Phone = uni.getStorageSync('Phone');
			const userPwd = uni.getStorageSync('userPwd');
			if (Phone && userPwd) {
				this.loginForm.Phone = Phone;
				this.loginForm.userPwd = userPwd;				
			} else {
				this.loginForm.Phone = "";
				this.loginForm.userPwd = "";				
			}
		},
		methods: {
			loginBtn() {
				//记住密码
				//登录成功将用户名密码存储到用户本地
				this.$refs.uLoginForm.validate().then(res => {
					uni.request({
						url: this.$api + '/users/login',
						data: {
							Phone: this.loginForm.Phone,
							userPwd: this.loginForm.userPwd
						},
						method: 'post',
						success: (res) => {
							if (res.data.length) {
								//请求回来后，把用户信息存储到VUEX里
								this.$store.dispatch('saveUserInfo', res.data[0].userName);
								this.$store.dispatch('saveUserId', res.data[0].userId);
								this.$store.dispatch('isLogin', "token");
								if (!this.loginForm.rememberPsw) { //用户勾选“记住密码”
									console.log("记住密码")
									uni.setStorageSync('Phone', this.loginForm.Phone);
									uni.setStorageSync('userPwd', this.loginForm.userPwd);
								} else { //用户没有勾选“记住密码”
									console.log("没有记住密码")
									uni.removeStorageSync('Phone');
									uni.removeStorageSync('userPwd');
									this.loginForm.Phone = "";
									this.loginForm.userPwd = "";
								}
								uni.reLaunch({
									url: '/pages/user/user'
								});
							} else {
								uni.showToast({
									title: '账号或者密码输入有误',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.log(err)
							uni.showToast({
								title: '网络或接口出现错误',
								icon: 'none'
							});
						}
					})

				})
			},
			registerBtn() {
				uni.navigateTo({
					url: '/pages/user/loginAndReg/register'
				})
			},
			passwordF_B() {
				this.hideEyes = !this.hideEyes;
			},
			formSubmit(e) {
				console.log(e.detail.value);
			}
		},
		onReady() {
			// 设置表单校验规则 否则表单校验无效
			this.$refs.uLoginForm.setRules(this.rules);
		}
	}
</script>

<style>
	page {
		background-color: #FFE4B5;
	}
</style>

<style scoped lang="scss">
	.login_register {
		text-align: center;
		margin-top: 10px;
	}

	.btn_login,
	.btn_register {
		margin: 5px;
		padding: 10px 30px;
		display: inline;
	}

	.login-form {
		margin: -9px 10px 0 10px;
		background: #007AFF;
		border-radius: 10px;
		background-color: #EEEEEE;
		box-shadow: 0 2px 10px #9B9B9B;
		padding: 20px;
	}

	.form-input input {
		background: #ffffff;
		border-radius: 5px;
		height: 40px;
		margin: 20px 0;
		padding: 0 10px;
	}

	.login-img {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 108px;
		margin-top: 100rpx;
	}

	.owl-login {
		width: 211px;
		height: 108px;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		position: absolute;
	}

	.owl-login .hand {
		width: 34px;
		height: 34px;
		-webkit-border-radius: 40px;
		border-radius: 40px;
		background-color: #472d20;
		transform: scaleY(0.6);
		transition: 0.3s ease-out;
		position: absolute;
		left: 14px;
		bottom: -8px;
	}

	.owl-login .hand.hand-r {
		left: 170px;
	}

	.owl-login .arms {
		top: 58px;
		position: absolute;
		width: 100%;
		height: 41px;
		overflow: hidden;
	}

	.owl-login .arms .arm {
		width: 40px;
		height: 65px;
		position: absolute;
		left: 20px;
		top: 40px;
		background-image: url("");
		background-size: 100%;
		transition: 0.3s ease-out;
		transform: rotate(-20deg);
	}

	.owl-login .arms .arm.arm-r {
		transform: rotate(20deg) scaleX(-1);
		left: 158px;
	}

	.owl-login.password .hand {
		transform: translateX(42px) translateY(-15px) scale(0.7);
	}

	.owl-login.password .hand.hand-r {
		transform: translateX(-42px) translateY(-15px) scale(0.7);
	}

	.owl-login.password .arms .arm {
		transform: translateY(-40px) translateX(40px);
	}

	.owl-login.password .arms .arm.arm-r {
		transform: translateY(-40px) translateX(-40px) scaleX(-1);
	}
</style>
